<template>
  <el-dialog
    v-bind="$attrs"
    v-model="dialogVisible"
    :title="title"
    :width="width"
    :fullscreen="fullscreen"
    :top="top"
    :modal="modal"
    :append-to-body="appendToBody"
    :lock-scroll="lockScroll"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :before-close="beforeClose"
    :center="center"
    :destroy-on-close="destroyOnClose"
    :close-icon="closeIcon"
    :draggable="draggable"
    :align-center="alignCenter"
    :open-delay="openDelay"
    :close-delay="closeDelay"
    :with-header="withHeader"
    :accessibility="accessibility"
    :focus-trap="focusTrap"
    :trap-focus="trapFocus"
    :auto-insert-space="autoInsertSpace"
    @open="handleOpen"
    @opened="handleOpened"
    @close="handleClose"
    @closed="handleClosed"
  >
    <slot />
    <template #header v-if="$slots.header">
      <slot name="header" />
    </template>
    <template #footer v-if="$slots.footer">
      <slot name="footer" />
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: 'MyElDialog',
  inheritAttrs: false,
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: [String, Number],
      default: '50%'
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    top: {
      type: String,
      default: '15vh'
    },
    modal: {
      type: Boolean,
      default: true
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    beforeClose: {
      type: Function,
      default: undefined
    },
    center: {
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    closeIcon: {
      type: [String, Object],
      default: 'Close'
    },
    draggable: {
      type: Boolean,
      default: false
    },
    alignCenter: {
      type: Boolean,
      default: false
    },
    openDelay: {
      type: Number,
      default: 0
    },
    closeDelay: {
      type: Number,
      default: 0
    },
    withHeader: {
      type: Boolean,
      default: true
    },
    accessibility: {
      type: Boolean,
      default: true
    },
    focusTrap: {
      type: Boolean,
      default: true
    },
    trapFocus: {
      type: Boolean,
      default: true
    },
    autoInsertSpace: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue', 'open', 'opened', 'close', 'closed'],
  computed: {
    dialogVisible: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  methods: {
    handleOpen() {
      this.$emit('open')
    },
    handleOpened() {
      this.$emit('opened')
    },
    handleClose() {
      this.$emit('close')
    },
    handleClosed() {
      this.$emit('closed')
    }
  }
}
</script> 